<template>
  <!-- 模拟器 -->
  <div class="vue-simulator" ref="simulatorPage">
    <div style="height: 100%;" class="seeCan" ref="pageBox">
      <!-- banner -->
      <div class="banner computedHeight">
        <!--  -->
        <el-image class="banner-img" :src="baseInfoData[1].val" fit="cover" @mousedown="mousedown"></el-image>
        <div class="tag" v-show="baseInfoData[5].val.length>0?true:false">
          <span class="tag-item" v-for="(tag, index) in baseInfoData[5].val" :key="index">{{tag}}</span>
        </div>
      </div>
      <!-- 标题 -->
      <div class="tit computedHeight">
        <span class="tit-text" v-text="baseInfoData[0].val?baseInfoData[0].val:'待输入...'"></span>
        <div class="tit-ic-group">
          <!-- http://y.gtimg.cn/mediastyle/yqq/img/logo@2x.png?nowebp=1 2x -->
          <el-image src="/static/img/ic-group.png"></el-image>
        </div>
      </div>
      <!-- 特色 -->
      <div class="feature computedHeight">
        <span class="feature-tit">线路特色</span>
        <ul class="feature-ul" v-show="baseInfoData[4].val.length>0?true:false">
          <li
            class="feature-item"
            v-for="(feature, index) in baseInfoData[4].val"
            :key="index"
          >{{feature}}</li>
        </ul>
        <div v-show="!baseInfoData[4].val.length>0?true:false" style="font-size: 16px;">待输入...</div>
      </div>
      <!-- 色块 -->
      <div class="color-black computedHeight"></div>
      <!-- 单独简介 -->
      <!-- <div class="unit-summary" v-show="day.length>0?false:true" v-text="baseInfoData[2].val?baseInfoData[2].val:'待输入...'"></div> -->

      <!-- day -->
      <div class="day-box computedHeight" v-show="day.length>0?true:false">
        <!-- day tit -->
        <div class="day-tit" ref="titTab" v-show="day.length>0?true:false">
          <div class="day-tit-scrollX" ref="titTabScroll">
            <!-- tit-item active-tit -->
            <span
              :class="dayTitIndex===0?'tit-item active-tit':'tit-item'"
              v-for="(dayTit, dayTitIndex) in day"
              :key="dayTitIndex"
            >第{{dayTitIndex+1}}天</span>
          </div>
        </div>
        <!-- day content -->
        <div class="day-content" v-show="day.length>0?true:false">
          <div class="day-content-scrollY">
            <div class="day-every-box" v-for="(dayItem, dayItemIndex) in day" :key="dayItemIndex">
              <div class="u-summary" v-text="dayItem.summary?dayItem.summary:'待输入'"></div>
              <unit :unit="dayItem.point" ref="unit" @img-load="imgLoad"></unit>
              <!-- <div class="u-summary" v-text="dayItem.summary?dayItem.summary:'待输入'">{{dayItem.summary}}</div> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 其他 关联活动 -->
      <div class="correlationActive computedHeight">
        <div v-if="!baseInfoData[9].val.length>0" class="ca-tit">关联活动待选择...</div>
        <div v-else>
          <div class="ca-tit">立即购买(关联活动)</div>
          <div class="ca-parentbox">
            <div v-for="(item, index) in baseInfoData[9].val" :key="index" class="ca-itembox">
              <el-image :src="item.thumb" class="ca-img" fit="cover" @mousedown="mousedown"></el-image>
              <div class="ca-infogroup">
                <div class="cig-tit">仙女山萤火虫浪漫之 夏浪漫之夏</div>
                <div class="cig-price">
                  <span class="price-ic">¥</span>
                  <span class="price-num">5210</span>
                </div>
                <!-- <div class="cig-right"></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 关联旅游产品推荐 -->
      <div class="productRecommend computedHeight">
        <div v-if="!baseInfoData[8].val.length>0" class="ca-tit">旅游产品待选择...</div>
        <div v-else>
          <div class="ca-tit">相关产品推荐(关联旅游产品推荐)</div>
          <div class="pr-content">
            <div v-for="(item, index) in baseInfoData[8].val" :key="index" class="prc-item">
              <el-image :src="item.thumb" fit="cover" @mousedown="mousedown" class="prci-img"></el-image>
              <div class="pric-info">
                <div class="item-tit">{{item.title}}</div>
                <div class="item-info">
                  <div class="info-text">
                    <span class="text-ic">¥</span>
                    <span class="text-num">789</span>
                    <span class="text-te">起</span>
                  </div>
                  <span class="info-travelname">行李旅宿</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      // tit的上下margin
      titMargin: 40,
      // 特点的下margin
      featrueMargin: 20,
      // day margin-bottom
      dayMarginBottom: 20
    };
  },
  props: {
    day: {
      type: Array,
      default: () => {
        return [];
      }
    },
    baseInfoData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    baseInfoData: {
      handler(now, old) {
        this.initPageScroll();
        this.initTitTabScroll();
      },
      deep: true
    },
    day: {
      handler(now, old) {
        this.initPageScroll();
        this.initTitTabScroll();
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.initPageScroll();
      this.initTitTabScroll();
    });
  },
  components: {
    unit: httpVueLoader("./unit.vue")
  },
  methods: {
    mousedown(e) {
      e.preventDefault();
    },
    imgLoad() {
      this.initPageScroll();
    },
    initTitTabScroll() {
      // 这里计算滑动div的width
      let width = this.day.length * (60 + 15);
      this.$refs.titTabScroll.style.width = width + "px";
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.titTab, {
            startX: 0,
            click: true,
            scrollY: false,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    getPageHeight() {
      let pageItems = this.$refs.simulatorPage.getElementsByClassName(
        "computedHeight"
      );
      let height = 0;
      for (var i = 0; i < pageItems.length; i++) {
        height += pageItems[i].clientHeight;
      }
      return height;
    },
    initPageScroll() {
      const { titMargin, featrueMargin, dayMarginBottom } = this;

      this.$nextTick(() => {
        this.$refs.pageBox.style.height =
          this.getPageHeight() +
          titMargin +
          featrueMargin +
          dayMarginBottom +
          "px";
        this.simulatorPages = new BScroll(this.$refs.simulatorPage, {
          startX: 0,
          click: true,
          scrollY: true,
          scrollX: false,
          eventPassthrough: "horizontal",
          deceleration: 0.001
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./simulator.css";
/* 关联活动 */
.correlationActive,
.productRecommend {
  width: 95%;
  margin: 0 auto;
}
.ca-tit {
  padding: 20px 0 10px;
  font-size: 18px;
  color: #353535;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
}
.ca-parentbox {
  display: flex;
  /* align-items: center; */
  /* justify-content: flex-start; */
  width: 100%;
}
.ca-itembox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.ca-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 20px;
}
.ca-infogroup {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.cig-tit {
  font-size: 14px;
  color: #353535;
}
.cig-price {
  width: 100%;
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.price-ic {
  color: #04b794;
  font-size: 11px;
}
.price-num {
  font-size: 17px;
  color: #04b794;
  /* font-weight: bold; */
}
/* 关联旅游产品推荐 */

.pr-content::-webkit-scrollbar{
  width:5px;
  height:6px;
  /*background-color: transparent;*/
  background-color:#333;
}
/*滚动条的轨道*/
.pr-content::-webkit-scrollbar-track{
  /* box-shadow:inset 0 0 5px rgba(0,0,0,.3); */
  background-color: #FAFAFA;
}
/*滚动条的滑块按钮*/
.pr-content::-webkit-scrollbar-thumb{
  border-radius:5px;
  background-color:rgba(144,147,153,0.5);
  /* box-shadow:inset 0 0 5px #000; */
}
/*滚动条的上下两端的按钮*/
.pr-content::-webkit-scrollbar-button{
  height:5px;
  background-color:#B0AEDA;
  display:none;
}
.pr-content {
  width: 100%;
  overflow-x: auto;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.prc-item {
  width: 120px;
  height: 100%;
  margin-right: 15px;
}
.prci-img {
  width: 120px;
  height: 140px;
  border-radius: 10px;
}
.pric-info .item-tit {
  font-size: 14px;
  color: #353535;
  font-weight: bold;
  margin: 12px 0;
}
.pric-info .item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #04b794;
}
.pric-info .info-text {
  display: flex;
  align-items: center;
}
.pric-info .text-ic {
  font-size: 11px;
}
.pric-info .text-num {
  font-size: 17px;
}
.pric-info .text-te {
  font-size: 11px;
}
.info-travelname {
  font-size: 11px;
  color: #8a8a8a;
}
</style>